<template>
  <div class="exchangeRecord">
    <div class="tableRecord scrollbar" >
      <div v-if="tableData.length > 0">
        <div class="tableList" v-for="(item, index) in tableData" :key="index">
          <div class="flex listOne">
            USDT
            ({{item.fromChain}}
            <i class="iconfont icon-huaban124" style="color: #1296db;"></i>
            {{item.toChain}})
            <span class="time">{{item.createTime | dateFormat}}</span>
            <span class="colorThis" v-if="item.status === 0">
              {{ $t('order.doing') }}
            </span>
            <span style="color: #47B183;" v-if="item.status === 1">
              {{ $t('order.completed') }}
            </span>
            <span style="color: #FF1739;" v-if="item.status === 2">
              {{ $t('bosChain.Cancelled') }}
            </span>
          </div>
          <div class="flex listTwo">
            <!-- 数量 -->
            <div>
              <span class="color999">
                {{ $t('jy.number') }}({{item.toChain}} {{$t('bosChain.chain')}})：
              </span>
              <span>
                {{handleToFixed(item.orderCount, 4)}}USDT
              </span>
            </div>
            <!-- 地址 -->
            <div class="addressCls flex">
              <span class="color999" v-if="item.toChain === 'EOS'">
                {{ $t('newpos.receiveAccount') }}({{item.toChain}} {{$t('bosChain.chain')}})：
              </span>
              <span class="color999" v-else>
                {{ $t('exchange.receivingAddress1')}} ({{item.toChain}} {{$t('bosChain.chain')}})：
              </span>
              <span class="fn-text1">{{ item.receiver }}</span>
            </div>
            <!-- 手续费 -->
            <div>
              <span class="color999">{{ $t('exchange.usdtFee') }}({{item.toChain}} {{$t('bosChain.chain')}})：</span>
              <span v-if="item.toChain === 'ETH'">
               {{item.fee}} USDT
              </span>
              <span v-else>{{item.fee}} USDT</span>
            </div>
            <div class="trxCls flex">
              <span v-if="item.toChain === 'EOS'">TrxID:</span>
              <span v-else>Hash:</span>
              <a class="fn-text1" style="color: #278EDA;" target="_blank" :href="`https://bloks.io/tx/${item.outcomeTrx}`" v-if="item.toChain === 'EOS'">{{item.outcomeTrx}}</a>
              <a class="fn-text1" style="color: #278EDA;" target="_blank" :href="`https://tronscan.org/#/transaction/${(item.outcomeTrx)}`" v-else-if="item.toChain === 'TRON'">{{item.outcomeTrx}}</a>
              <a class="fn-text1" style="color: #278EDA;" target="_blank" :href="`https://etherscan.io/tx/${(item.outcomeTrx)}`" v-else-if="item.toChain === 'ETH' && country !== 'CN'">{{item.outcomeTrx}}</a>
              <a class="fn-text1" style="color: #278EDA;" target="_blank" :href="`https://cn.etherscan.com/tx/${(item.outcomeTrx)}`" v-else-if="item.toChain === 'ETH'">{{item.outcomeTrx}}</a>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="flexc" style="height: 100%; color: #999;">
        <span>{{ $t('myWallet.noData') }}</span>
      </div>
    </div>
    <div class="flexb">
      <el-pagination
        v-if="tableData.length > 0"
        :current-page="currPage"
        :page-size="20"
        @prev-click="handlePrevPage"
        @next-click="handleNextPage"
        layout="prev, pager, next">
      </el-pagination>
      <span v-else></span>
      <div class="color999">*{{$t('bosChain.usdtTip')}}</div>
    </div>
  </div>
</template>

<script>
import { toFixed } from '@/utils/validate';
import axios from 'axios'

export default {
  name: 'exchangeRecord', // 兑换记录
  data() {
    return {
      tableData: [],
      country: 'cn',
      currPage: 1,
    }
  },
  components: {},
  props: {
    exchangeRecordVisible: Boolean,
  },
  watch: {
    exchangeRecordVisible: function change(val) {
      if (val) {
        this.tableData = [];
        this.currPage = 1;
        this.handleGetTableData('sellorders');
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    // 兑换记录查询
    // table: 'sellorders' // 待处理的提币操作记录，提币完成后此记录被挪到soldorders表
    // table: 'soldorders' // 提币完成记录表（只保留有限条）
    // table: 'buyorders' // 充值完成后的充值记录
    this.tableData = [];
    this.handleGetTableData();
    this.handleGetCountry();
  },
  beforeDestroy() {},
  methods: {
    handleGetTableData() {
      const params = {
        currPage: this.currPage
      }
      this.$http.post('/coinConvert/orderList', params).then((res) => {
        if (res.code !== 0) {
          return;
        }
        this.tableData = res.orderList;
        this.tableData.forEach((v) => {
          const vv = v;
          vv.toChain = vv.toChain.toUpperCase();
          vv.fromChain = vv.fromChain.toUpperCase();
        });
      });
    },
    // 下一页
    handleNextPage() {
      if (this.tableData.length === 0 || this.tableData.length < 20) return;
      this.currPage += 1;
      this.handleGetTableData();
    },
    // 上一页
    handlePrevPage() {
      if (this.currPage === 1) return;
      this.currPage -= 1;
      this.handleGetTableData();
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    handleGetCountry() {
      axios.get('https://ipapi.co/json/', {
        headers: {
          'Content-Type': 'text/plain;charset=UTF-8',
        }
      }).then((result) => {
        if (result.status === 200) {
          this.country = result.data.country;
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.exchangeRecord {
  min-height: 400px;

  /deep/ .el-table .el-table__body tr th:nth-child(1) .cell{
    text-align: center;
  }

  .imgType {
    img {
      display: inline-block;
      width: 22px;
      vertical-align: middle;
      margin-top: -1px;
    }
  }

  .color999 {
    color: #999 !important;
  }

  .tableRecord {
    height: 570px;
    overflow: overlay;

    .tableList {
      padding: 10px 0;
      border-bottom: 1px solid #ebeef5;

      &:first-child {
        border-top: 1px solid #ebeef5;
      }

      .listOne {
        line-height: 30px;

        i {
          margin: 0 5px;
        }

        .time {
          margin: 0 15px;
        }
      }

      .listTwo {
        & > div {
          margin-right: 20px;
          width: 230px;

          &:nth-child(1) {
            width: 300px;
          }

          &:nth-child(2) {
            width: 280px;
          }

          &:nth-child(3) {
            width: 230px;
          }

          &:last-child {
            margin-right: 0;
          }
        }

        .trxCls {
          span:nth-child(1) {
            width: 50px;
          }

          a {
            width: 120px;
          }
        }

        .addressCls {
          span:nth-child(1) {
            flex: 1.3;
          }
          span:nth-child(2) {
            flex: 1;
          }
        }
      }
    }
  }
}

.theme-1B1D27 {
  .imgType {
    span {
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .blackColor {
    color: rgba(255, 255, 255, 0.8);
  }

  .tableList {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;

    &:first-child {
      border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
  }
}
</style>
